<template>
  <div class="contenter">
    <div class="montit">选择日期</div>
    <div class="monthtips flex-center">
      <svg class="icon" aria-hidden="true" @click="yearprev">
      	<use xlink:href="#icon-bigleft"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="monthprev">
      	<use xlink:href="#icon-left"></use>
      </svg>
      <span>{{this.publicday | timefilter}}</span>
      <svg class="icon" aria-hidden="true" @click="monthnest">
      	<use xlink:href="#icon-right"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="yearnest">
      	<use xlink:href="#icon-bigright"></use>
      </svg>
    </div>
    <div class="weekhead flex-star">
      <div v-for="week in '日一二三四五六'">{{week}}</div>
    </div>
    <div class="calendar_cont flex-star">
      <div v-for="beforday in calBefor" class="disable">{{beforday}}</div>
      <div v-for="day in cladays" @click="dayclick" class="calenda_item" :class="{today:istoday(day)}">{{day}}</div>
      <div v-for="afterday in calafter" class="disable">{{afterday}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        today: new Date(),
        publicday:new Date()
      }
    },
    props:{
      
    },
    filters:{
      timefilter(time){
        let date = new Date(time);
        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
      }
    },
    computed: {
      cladays() {
        let year = this.publicday.getFullYear();
        if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
          return [31,29,31,30,31,30,31,31,30,31,30,31][this.publicday.getMonth()];
        }else{
          return [31,28,31,30,31,30,31,31,30,31,30,31][this.publicday.getMonth()];
        }
        // switch (this.publicday.getMonth() + 1) {
        //   case 1:
        //   case 3:
        //   case 5:
        //   case 7:
        //   case 8:
        //   case 10:
        //   case 12:
        //     return 31
        //   case 4:
        //   case 6:
        //   case 9:
        //   case 11:
        //     return 30
        //   case 2:
        //     return 28
        // }
      },
      calBefor() {
        let firstday = new Date(this.publicday);
        firstday.setDate(1);
        let days = firstday.getDay();
        let res = [];
        for (let i = 0; i < days; i++) {
          firstday.setDate(firstday.getDate() - 1);
          res.unshift(firstday.getDate())
        }
        return res;
      },
      calafter() {
        let lastday = new Date(this.publicday);
        lastday.setDate(this.cladays);
        let days = 6 - lastday.getDay();
        // let res = [];
        // for (let i = 1; i <= days; i++) {
        //   res.push(i);
        // }
        // return res;
        return days;
      }
    },
    methods: {
      dayclick() {
        this.$notice({
          msg: this.publicday.getFullYear() + '年' + this.publicday.getMonth() + '月' + event.target.innerText + '日',
          flag: true
        });
      },
      monthprev(){
        // this.publicday.setMonth(this.publicday.getMonth() - 1);
        // console.log(this.publicday);
        let temp = new Date(this.publicday);
        temp.setMonth(temp.getMonth() - 1)
        this.publicday = temp
      },
      monthnest(){
        let temp = new Date(this.publicday);
        temp.setMonth(temp.getMonth() + 1)
        this.publicday = temp
      },
      yearprev(){
        // this.publicday.setMonth(this.publicday.getMonth() - 1);
        // console.log(this.publicday);
        let temp = new Date(this.publicday);
        console.log(temp)
        temp.setFullYear(temp.getFullYear() - 1)
        this.publicday = temp
      },
      yearnest(){
        let temp = new Date(this.publicday);
        temp.setFullYear(temp.getFullYear() + 1)
        this.publicday = temp
      },
      istoday(today){
        return today === this.today.getDate() && this.publicday.getMonth() === this.today.getMonth()
        && this.today.getFullYear() === this.publicday.getFullYear();
      },
    }
  }
</script>

<style scoped>
  .contenter {
    padding: 0 .25rem;
    background: white;
  }

  .weekhead div {
    width: calc(100% / 7);
    text-align: center;
    height: calc((100vw - .5rem) / 7);
    line-height: calc((100vw - .5rem) / 7);
  }

  .calendar_cont {
    flex-wrap: wrap;
  }

  .calendar_cont div {
    width: calc(100% / 7);
    text-align: center;
    border-radius: 4px;
    height: calc((100vw - .5rem) / 7);
    line-height: calc((100vw - .5rem) / 7);
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
  }

  .disable {
    color: #999;
    background: #f2f2f2;
  }

  .calenda_item:active {
    background: #ccc;
  }

  .today{
    background: #007AFF;
    color: #fff;
  }

  .montit{
    text-align: center;
    line-height: .8rem;
  }

  .monthtips{
    font-weight: bold;
  }

  .monthtips span{
    margin:  0 .25rem;
  }

  .monthtips svg{
    margin: 0 .1rem;
  }
</style>
